<script setup lang="ts">
import GlobalHeader from "../components/GlobalHeader.vue";
import GlobalFooter from "../components/GlobalFooter.vue";
</script>

<template>
  <el-container class="layout-container">
    <el-header class="header">
      <global-header/>
    </el-header>

    <el-main class="main">
      <el-container>
        <el-main class="content">
          <router-view/>
        </el-main>
      </el-container>
    </el-main>

    <el-footer>
      <global-footer/>
    </el-footer>
  </el-container>
</template>

<style scoped>
:deep(.el-main){
  padding: 0;
}

.content {
  min-height: 80vh;
  max-width: 1200px;
  padding: 24px;
  box-sizing: border-box;
  margin: 0 auto 100px;
}

:deep(.el-footer) {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .main {
    padding: 0;
  }
}
</style>
